<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>时间轴</title>
        <!--<link rel="stylesheet" href="css/reset.min.css">-->
        <link rel="stylesheet" href="{{ url_for('static', filename='timeline/css/reset.min.css') }}">
        <!--<link rel="stylesheet" href="css/style.css">-->
        <link rel="stylesheet" href="{{ url_for('static', filename='timeline/css/style.css') }}">

        {% import "includes/paginate.html" as pg %}
        <link rel="shortcut icon" href="{{url_for('static', filename='base/images/logo.png')}}">
        <link rel="stylesheet" href="{{url_for('static', filename='base/css/bootstrap.min.css')}}">
        <link rel="stylesheet" href="{{url_for('static', filename='base/css/bootstrap-movie.css')}}">
        <link rel="stylesheet" href="{{url_for('static', filename='base/css/animate.css')}}">
        <style>
            .navbar-brand>img {
                display: inline;
            }
            .media{
                padding:3px;
                border:1px solid #ccc
            }
        </style>
    </head>
    <body>
        <!--导航-->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!--小屏幕导航按钮和logo-->
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="{{ url_for('home.index') }}" class="navbar-brand" style="width:250px;">
                        <img src="{{url_for('static', filename='base/images/logo.png')}}" style="height:30px;">&nbsp;<span style="height: 30px; font-size: 20px;">小电影</span>
                    </a>
                </div>
                <!--小屏幕导航按钮和logo-->
                <!--导航-->
                <div class="navbar-collapse collapse">
                    <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
                        <div class="form-group input-group">
                            <input type="text" class="form-control" placeholder="请输入电影名称" id="key_movie" >
                            <span class="input-group-btn">
                                <a class="btn btn-primary" id="do_search" style="border-radius: 4px;"><span class="glyphicon glyphicon-search" ></span></a>
                            </span>
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="curlink" href="{{ url_for('home.index', page=1)}}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影</a>
                        </li>
                        <li>
                            <a class="curlink" href="{{ url_for('timeline.index', page=1)}}"><span class="glyphicon glyphicon-film"></span>&nbsp;电影时间轴</a>
                        </li>
                        <li>
                            <a class="curlink" href="{{ url_for('home.login')}}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
                        </li>
                        <li>
                            <a class="curlink" href="{{ url_for('home.logout')}}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                        </li>
                        <li>
                            <a class="curlink" href="{{ url_for('home.user')}}"><span class="glyphicon glyphicon-user"></span>&nbsp;用户中心</a>
                        </li>
                    </ul>
                </div>
                <!--导航-->
            </div>
        </nav>
        <!--导航-->
        <section id=timeline>
            <h1>时间轴</h1>
            <p class="leader">我们现在所做所想的一切，终将随时间消逝，不同的，是你能否掀起历史长河的一片浪花。</p>
            <div class="demo-card-wrapper" id="card-test">
                <div class="demo-card demo-card--step1">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[0].id }}</span>
                            </div>
                            <h2>
                                <span class="small">{{ page_data.items[0].tag }}</span>
                                <br/>
                                {{ page_data.items[0].title }}
                            </h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[0].add_time }}</p>
                            <img src="{{ page_data.items[0].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step2">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[1].id }}</span>
                            </div>
                            <h2>
                                <span class="small">{{ page_data.items[1].tag }}</span>
                                <br/>
                                {{ page_data.items[1].title }}
                            </h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[1].add_time }}</p>
                            <img src="{{ page_data.items[1].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step3">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[2].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[2].tag }}</span><br/>{{ page_data.items[2].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[2].add_time }}</p>
                            <img src="{{ page_data.items[2].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step4">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[3].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[3].tag }}</span><br/>{{ page_data.items[3].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[3].add_time }}</p>
                            <img src="{{ page_data.items[3].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step5">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[4].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[4].tag }}</span><br/>{{ page_data.items[4].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[4].add_time }}</p>
                            <img src="{{ page_data.items[4].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step6">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[5].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[5].tag }}</span><br/>{{ page_data.items[5].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[5].add_time }}</p>
                            <img src="{{ page_data.items[5].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step7">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[6].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[6].tag }}</span><br/>{{ page_data.items[6].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[6].add_time }}</p>
                            <img src="{{ page_data.items[6].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step8">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[7].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[7].tag }}</span><br/>{{ page_data.items[7].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[7].add_time }}</p>
                            <img src="{{ page_data.items[7].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step9">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[8].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[8].tag }}</span><br/>{{ page_data.items[8].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[8].add_time }}</p>
                            <img src="{{ page_data.items[8].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step10">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[9].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[9].tag }}</span><br/>{{ page_data.items[9].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[9].add_time }}</p>
                            <img src="{{ page_data.items[9].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step11">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[10].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[10].tag }}</span><br/>{{ page_data.items[10].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[10].add_time }}</p>
                            <img src="{{ page_data.items[10].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step12">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[11].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[11].tag }}</span><br/>{{ page_data.items[11].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[11].add_time }}</p>
                            <img src="{{ page_data.items[11].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step13">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[12].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[12].tag }}</span><br/>{{ page_data.items[12].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[12].add_time }}</p>
                            <img src="{{ page_data.items[12].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step14">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[13].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[13].tag }}</span><br/>{{ page_data.items[13].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[13].add_time }}</p>
                            <img src="{{ page_data.items[13].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step15">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[14].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[14].tag }}</span><br/>{{ page_data.items[14].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[14].add_time }}</p>
                            <img src="{{ page_data.items[14].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step16">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[15].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[15].tag }}</span><br/>{{ page_data.items[15].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[15].add_time }}</p>
                            <img src="{{ page_data.items[15].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step17">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[16].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[16].tag }}</span><br/>{{ page_data.items[16].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[16].add_time }}</p>
                            <img src="{{ page_data.items[16].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step18">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[17].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[17].tag }}</span><br/>{{ page_data.items[17].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[17].add_time }}</p>
                            <img src="{{ page_data.items[17].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step19">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[18].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[18].tag }}</span><br/>{{ page_data.items[18].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[18].add_time }}</p>
                            <img src="{{ page_data.items[18].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
                <div class="demo-card demo-card--step20">
                        <div class="head">
                            <div class="number-box">
                                <span>{{ page_data.items[19].id }}</span>
                            </div>
                            <h2><span class="small">{{ page_data.items[19].tag }}</span><br/>{{ page_data.items[19].title }}</h2>
                        </div>
                        <div class="body">
                            <p>{{ page_data.items[19].add_time }}</p>
                            <img src="{{ page_data.items[19].imgUrl }}" alt="Graphic" height="90%" width="100%">
                        </div>
                    </div>
            </div>
        </section>

        <div class="col-md-12 text-center" style="margin-top:6px;">
            {{ pg.page(page_data, "timeline.index") }}
        </div>

        <script src="{{url_for('static', filename='base/js/jquery.min.js')}}"></script>
        <script src="{{url_for('static', filename='base/js/bootstrap.min.js')}}"></script>
        {#<script src="{{url_for('static', filename='MDB/js/jquery-3.2.1.min.js')}}"></script>#}
        {#<script src="{{url_for('static', filename='MDB/js/bootstrap.js')}}"></script>#}
        {#<script src="{{url_for('static', filename='MDB/js/mdb.js')}}"></script>#}
        {#<script src="{{url_for('static', filename='MDB/js/popper.min.js')}}"></script>#}
        <script src="{{url_for('static', filename='base/js/jquery.singlePageNav.min.js')}}"></script>
        <script src="{{url_for('static', filename='base/js/wow.min.js')}}"></script>
        <script src="{{url_for('static', filename='lazyload/jquery.lazyload.min.js')}}"></script>
        <script src="{{url_for('static', filename='base/js/holder.min.js')}}"></script>
        {# <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script> #}
        <script>
            $(function() {
                new WOW().init();
            })
        </script>
        <script>
            $(document).ready(function() {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
            });

            $("#do_search").click(function () {
                var key = $("#key_movie").val();
                location.href = "{{ url_for('home.search', page=1) }}?key=" + key;
            });
        </script>
    </body>
</html>
